<!--绘图-->
<template>
	<div class="cs-left">
		<div class="zshi" ref="zs" style="float: left"></div>
	</div>
	<div @click="ceshi($event)" class="cs-centre">
		<div v-show="cshi" ref="cshi11" style="position: relative; top: 200px; left: 100px">
			<input />
			<div>
				<div class="zshi" ref="zs" style="float: left"></div>
				<input />
			</div>
		</div>
	</div>
	<div class="cs-right">
		<input />
		<input />
	</div>
</template>

<script setup lang="ts" name="FiveChansIndex">
import { ref } from 'vue'
import { ElMessage, MessageParamsWithType, formItemValidateStates } from 'element-plus'
import service from '@/utils/request'

import { findData } from '@/api/nb/genealogy/genealogy'

const zs = ref()
const cshi = ref(true)
let cshi11 = ref()
const ceshi = (_e: any) => {
	zs.value
	cshi.value = true
	cshi11.value.style['top'] = _e.clientY + 'px'
	cshi11.value.style['left'] = _e.clientX + 'px'
}
</script>

<style lang="scss" scoped>
input {
	width: 30px;
}
.cs-left {
	width: 15%;
	height: 100%;
	float: left;
	background-color: rgb(227, 227, 227);
}
.cs-centre {
	width: 70%;
	height: 100%;
	float: left;
	background-color: rgb(239, 239, 239);
}
.cs-right {
	width: 15%;
	height: 100%;
	float: left;
	background-color: rgb(227, 227, 227);
}
.zshi {
	width: 100px;
	height: 100px;
	background-color: red;
}
</style>
